<script setup>
import { useDebounce } from '@/utils'
const props = defineProps({
  text: String,
  bg: {
    type: String,
    default: '#808080',
  },
  color: {
    type: String,
    default: '#fff',
  },
  delay: {
    type: Number,
    default: 500,
  },
})
const emit = defineEmits(['click'])
const handleClick = useDebounce(
  () => {
    emit('click')
  },
  props.delay,
  true,
)
</script>
<template>
  <button
    class="p-4 pt-2 pb-2 rounded-md cursor-pointer hover:opacity-80 transition-all ease-in-out duration-200 active:scale-105"
    :style="{ background: bg, color: color }"
    @click="handleClick"
  >
    <div class="flex gap-2 items-center justify-center text-nowrap h-5">
      <slot></slot>
    </div>
  </button>
</template>
<style lang="scss" scoped></style>
